<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>跨境电商借卖平台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-4.6.2-dist/css/bootstrap.css">
    <style type="text/css">
        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #2d3436, #1e272e); /* 深色渐变背景 */
            color: #f1f2f6;
        }

        #menu {
            position: fixed;
            top: 0;
            width: 100%;
            background: linear-gradient(90deg, #6c5ce7, #00cec9); /* 渐变色菜单 */
            color: white;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
        }

        #menu h1 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: bold;
        }

        #menu .nav-links {
            display: flex;
        }

        #menu .nav-link {
            color: white;
            margin: 0 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            text-decoration: none;
            transition: background 0.3s, transform 0.3s;
        }

        #menu .nav-link:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        #menu .nav-link.active {
            background: #00cec9;
            color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        #mainFrame {
            width: 100%;
            height: calc(100vh - 56px); /* 减去菜单高度 */
            margin-top: 56px; /* 留出菜单区域 */
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .logout-btn {
            background: #e17055;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
        }

        .logout-btn:hover {
            background: #d63031;
            transform: scale(1.1);
        }

        @media screen and (max-width: 768px) {
            #menu h1 {
                font-size: 1.4rem;
            }

            #menu .nav-link {
                padding: 0.4rem 0.8rem;
                margin: 0 0.3rem;
            }

            #mainFrame {
                border-radius: 8px;
            }
        }
    </style>
</head>
<body>
<div id="menu">
    <h1>跨境电商借卖平台</h1>
    <div class="nav-links">
        <a class="nav-link active" href="home.jsp" target="mainFrame">首页</a>
        <c:forEach items="${menus}" var="menu">
            <a class="nav-link" href="${menu.url}" target="mainFrame">${menu.name}</a>
        </c:forEach>
        <button class="logout-btn" onclick="logout()">退出登录</button>
    </div>
</div>

<iframe name="mainFrame" id="mainFrame" src="home.jsp"></iframe>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-4.6.2-dist/js/bootstrap.js"></script>

<script>
    // 实现退出登录功能
    function logout() {
        $.ajax({
            url: "${pageContext.request.contextPath}/logout",
            type: "POST",
            success: function () {
                alert("退出成功！");
                window.location.href = "${pageContext.request.contextPath}/login.jsp";
            },
            error: function () {
                alert("退出失败，请重试！");
            }
        });
    }
</script>

</body>
</html>
